<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item :label="$t('employing_company')" prop="employerId">
        <employerSelect v-model="queryParams.employerId" @change="employerChange"></employerSelect>
      </el-form-item>
      <el-form-item :label="$t('employee_name')" prop="employeeId" >
        <el-select v-model="queryParams.employeeId" filterable ref="select"
          :placeholder="$t('please_enter', { name: $t('employee_name') })">
          <el-option v-for="(item, index) of employeeList" :label="item.employeeName" :value="item.id"
            :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('department')" prop="employerDeptId">
        <treeselect :normalizer="normalizer" v-model="queryParams.employerDeptId" :options="deptOptions"
          :show-count="true" :placeholder="$t('please_select', { name: $t('department') })"
          style="width: 240px; height: 32px" />
      </el-form-item>
      <el-form-item :label="$t('attendance_group')" prop="attendanceGroupId">
        <el-select filterable v-model="queryParams.attendanceGroupId"
          :placeholder="$t('please_select', { name: $t('attendance_group') })" clearable>
          <el-option v-for="dict in attendanceList" :key="dict.id" :label="dict.attendanceGroupName" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('shift')" prop="shiftName">
        <el-input v-model="queryParams.shiftName" :placeholder="$t('please_enter', { name: $t('please_enter', { name: '' }) })"
          clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('employee_code')" prop="employeeCode">
        <el-input v-model="queryParams.employeeCode" :placeholder="$t('please_enter', { name: $t('employee_code') })"
          clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('modify_date')" prop="dateRange">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" :start-placeholder="$t('start_date')"
          :end-placeholder="$t('ending_date')"></el-date-picker>
      </el-form-item>

      <el-form-item :label="$t('methods_of_clock_in')" prop="punchType">
        <el-select v-model="queryParams.punchType"
          :placeholder="$t('please_select', { name: $t('methods_of_clock_in') })" clearable>
          <el-option v-for="dict in dict.type.check_work_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('attendance_status')" prop="status">
        <el-select v-model="queryParams.status" :placeholder="$t('please_select', { name: $t('attendance_status') })"
          clearable>
          <el-option v-for="dict in dict.type.check_work_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
      $t("reset")
    }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-col :span="1.5">
          <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
            v-hasPermi="['checkWork:checkWorkRecord:import']">{{ $t("import") }}</el-button>
        </el-col>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['checkWork:checkWorkRecord:export']">{{ $t("export_attendance_recordd") }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="detailsList" @selection-change="handleSelectionChange" border :max-height="tableHeight"
      @sort-change="sortChange">
      <el-table-column :label="$t('employer_name')" align="center" prop="employerName" :show-overflow-tooltip="true"
          min-width="120" />
        <el-table-column :label="$t('employee_code')" align="center" prop="employeeCode" :show-overflow-tooltip="true"
        min-width="120"   />
        <el-table-column :label="$t('employee_name')" align="center" prop="employeeName" :show-overflow-tooltip="true"
        min-width="120"   />
        <el-table-column :label="$t('department')" align="center" prop="employerDeptName" :show-overflow-tooltip="true"
          />
          <el-table-column :label="$t('position')" align="center" prop="position" :show-overflow-tooltip="true"
        min-width="150"   />
        <el-table-column :label="$t('modify_date')" align="center" prop="punchDate" :show-overflow-tooltip="true" sortable="custom" 
        min-width="120"   />
      <el-table-column :label="$t('weekday')" align="center" prop="weekDay" :show-overflow-tooltip="true"
          min-width="120" />
          <el-table-column :label="$t('shift')" align="center" prop="shiftName" :show-overflow-tooltip="true"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.shiftName }}</div>
        </template>
      </el-table-column>
      
      <el-table-column :label="$t('work_start_time')" align="center" prop="signInTime" width="180"  >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.shouldSignInTime || '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('work_end_time')" align="center" prop="signInTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.shouldSignOutTime || '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('work_hours_per_day')" align="center" prop="signOutTime" width="180"  >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.workTime || '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('work_hours')" align="center" prop="signInTime" width="180"  >
      <template slot-scope="scope">
        <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
          {{ item.signInTime || '-' }}</div>
      </template>
      </el-table-column>
      <el-table-column :label="$t('duty_time')" align="center" prop="signOutTime" width="180"  >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.signOutTime || '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('duration_of_attendance')" align="center" prop="signOutTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.signTime || '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('total_duration_of_overtime')" align="center" prop="signOutTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.applyTime || '-' }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('total_duration_of_overtime_hour')" align="center" prop="signOutTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.applyTimeHours || '-' }}</div>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('attendance_abnormality')" align="center" prop="signInTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.status || '-' }}</div>
        </template>
      </el-table-column>

      <el-table-column :label="$t('durationOfTardiness')" align="center" prop="signInTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.late || '-' }}</div>
        </template>
      </el-table-column>
     
      <el-table-column :label="$t('durationOfEarlyLeave')" align="center" prop="signInTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.leave || '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('absenteeism_hours')" align="center" prop="absenteeism" width="180">
        <template slot-scope="scope">
          {{scope.row.attendanceRecordShiftDTOList && scope.row.attendanceRecordShiftDTOList.length && scope.row.attendanceRecordShiftDTOList[0].absenteeism|| '-'}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('remarks')" align="center" prop="remark" width="180">
        <template slot-scope="scope">
          {{scope.row.attendanceRecordShiftDTOList && scope.row.attendanceRecordShiftDTOList.length && scope.row.attendanceRecordShiftDTOList[0].remark ||'-'}}
        </template>
      </el-table-column>
    
        <!-- <el-table-column :label="$t('attendance_group')" align="center" prop="attendanceGroupName"
        :show-overflow-tooltip="true"   min-width="120" />
     
      <el-table-column :label="$t('employee_number')" align="center" prop="workNo" :show-overflow-tooltip="true"
          />
      <el-table-column :label="$t('mobile_phone_number')" align="center" prop="phone" :show-overflow-tooltip="true"
        min-width="120"   /> -->
    
    
   
      

     

<!--      
      <el-table-column :label="$t('total_duration_of_late')" align="center" prop="signOutTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.lateAndLeave || '-' }}</div>
        </template>
      </el-table-column>
     
      <el-table-column :label="$t('working_hours_hour')" align="center" prop="signOutTime" width="180"
         >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            {{ item.workTimeHours || '-' }}</div>
        </template>
      </el-table-column> -->
      
     
      <!-- <el-table-column :label="$t('methods_of_clock_in')" align="center" prop="punchTypeName"  
        min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.check_work_type" :value="scope.row.punchType" />
        </template>
      </el-table-column> -->










      <!-- <el-table-column :label="$t('attendance_status')" align="center" prop="status" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.attendanceRecordShiftDTOList" :key="index">
            <dict-tag :options="dict.type.check_work_status" :value="item.status" />
          </div>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('action')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
            v-hasPermi="['checkWork:checkWorkRecord:view']">{{ $t("view") }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" :page-sizes="[10, 20, 30, 50, 100, 200]" />

    <!-- 查看考勤详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <employeeHeader :empId="form.employeeId" v-if="open">
        <template slot="customLabel">
          <el-descriptions-item :label="$t('employer')">
            {{ form.employerName }}</el-descriptions-item>
          <el-descriptions-item :label="$t('work_format')">
            <dict-tag :options="dict.type.check_work_type" :value="form.punchForm" /></el-descriptions-item>
        </template>
      </employeeHeader>
      <el-card class="box-card" style="margin-bottom: 20px">
        <div slot="header" class="clearfix">
          <span>{{ $t("clock_in_details") }}</span>
        </div>
        <div v-for="(item, index) in form.attendanceRecordShiftDTOList" :key="index" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="24" style="margin-bottom:10px">{{ $t('shift') }} : {{ item.shiftName }}</el-col>
            <el-col :span="6" style="margin-bottom:10px">{{ $t('work_hours') }} : {{ item.signInTime }}</el-col>
            <el-col :span="18" style="margin-bottom:10px">{{ $t('clock_in_location') }} : {{ item.signInAddress }}</el-col>
            <el-col :span="24" style="margin-bottom:10px">{{ $t('logo') }} : <image-upload v-model="item.signInPic"
                :isShowTip="false" :limit="1" v-if="item.signInPic" /> <span v-else> - </span></el-col>
            <el-col :span="6" style="margin-bottom:10px">{{ $t('duty_time') }} : {{ item.signOutTime }}</el-col>
            <el-col :span="18" style="margin-bottom:10px">{{ $t('clock_in_location') }} : {{ item.signOutAddress }}</el-col>
            <el-col :span="24" style="margin-bottom:10px">{{ $t('logo') }} : <image-upload v-model="item.signOutPic"
                :isShowTip="false" :limit="1" v-if="item.signOutPic" /> <span v-else> - </span></el-col>
          </el-row>
        </div>
      </el-card>
    </el-dialog>
    <!-- 导入弹窗 -->
    <importModal ref="importModal" :title="$t('import_attendance_records')"
      uploadUrl="business/attendanceRecord/importTemplate.do" @refreshList="getList" :ifHasTemplate="false">
    </importModal>
  </div>
</template>

<script>
import {
  listDetails,
  getDetails,
  delDetails,
} from "@/api/checkWork/checkWorkRecord";
import {
  listAttendance,
} from "@/api/checkWork/checkWorkGroup";
import { pageListByEmployer } from "@/api/custom/employeeList";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import employeeHeader from "@/views/custom/employeeList/detail/header.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import employerSelect from "@/views/components/custom/employerSelect.vue";
import importModal from "@/views/components/custom/importModal.vue";
export default {
  components: {
    Treeselect,
    employeeHeader,
    employerSelect,
    importModal
  },
  name: "Details",
  dicts: ["check_work_type", "check_work_status", "sys_user_sex"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      // 日期范围
      dateRange: "",
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 考勤详情表格数据
      detailsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        employerName: null,
        employerDeptId: null,
        employeeId: null,
        status: null,
        attendanceGroupId: null,
        shiftName: null,
        employeeCode: null,
        punchType: null,
        punchDateEnd: null,
        punchDateStart: null
      },
      employeeList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      deptOptions: [],
      //考勤组集合
      attendanceList: [],
      size:10,
    };
  },
  created() {
    this.getList();
    this.getAttendanceList()
    console.log('dict.type.check_work_status', this.dict.type.check_work_status)
  },
  mounted(){
    this.$refs.select.$refs.scrollbar.$refs.wrap.addEventListener('scroll',this.scolling)
  },
  methods: {
    scolling(){
		let e = this.$refs.select.$refs.scrollbar.$refs.wrap
	     if(this.noMore) return
	     // 到底时触发 loadMore
	     let loadMore = e.scrollHeight -  e.scrollTop <=  e.clientHeight
	     if(loadMore){
        this.size+=10;
        this.pageListByEmployer(this.size)
	     }
	},
    sortChange(e) {
      console.log("🐛 ~ sortChange ~ e:", e)
      let orderStr = e.order === "ascending" ? "asc" : "desc";
      this.queryParams.order = orderStr;
      this.queryParams.prop = e.prop;
      this.getList();


    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.deptName,
        children: node.children,
      };
    },
    employerChange() {
      this.queryParams.employeeId = null;
      this.queryParams.employerDeptId = null;
      if (this.queryParams.employerId) {
        this.getDeptTree();
        this.pageListByEmployer();
      }
    },
    pageListByEmployer(size=10) {
      pageListByEmployer({
        employerId: this.queryParams.employerId,
        size,
      }).then((res) => {
        this.employeeList =[...res.data.records,...res.data.records,...res.data.records];
        this.noMore =  this.employeeList.length == res.data.total?true:false;
      });
    },
    /** 查询考勤详情列表 */
    getList() {
      this.loading = true;
      if (this.dateRange.length > 0) {
        this.queryParams.punchDateStart = this.dateRange[0]
        this.queryParams.punchDateEnd = this.dateRange[1];
      } else {
        this.queryParams.punchDateStart = null;
        this.queryParams.punchDateEnd = null;
      }
      listDetails(this.queryParams).then((response) => {
        this.detailsList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect(this.queryParams.employerId).then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = [];
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 查询考勤组集合 */
    getAttendanceList() {
      listAttendance({ pageNum: 1, pageSize: 9999 }).then((response) => {
        this.attendanceList = response.data.records;
      });
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.reset();
      const id = row.id;
      this.form = { ...row };
      this.open = true;
      this.title = this.$t("view");
      // getDetails(id).then((response) => {

      // });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm(this.$t("delete_data"))
        .then(function () {
          return delDetails(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t("operation_successful"));
        })
        .catch(() => { });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.$refs.importModal.showModal();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "business/attendanceRecord/export",
        {
          ...this.queryParams,
        },
        `attendanceRecord_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style scoped lang="scss">
.header-block {
  padding: 0 16px;
}
</style>
